<template>
  <div>
    <Collapse
      v-if="grid"
      name="容器"
    >
      <setting-item-box name="距离">
        <setting-item name="左侧距离">
          <el-input
            v-model="grid.left"
            size="small"
          />
        </setting-item>
        <setting-item name="右侧距离">
          <el-input
            v-model="grid.right"
            size="small"
          />
        </setting-item>
        <setting-item name="上侧距离">
          <el-input
            v-model="grid.top"
            size="small"
          />
        </setting-item>
        <setting-item name="下侧距离">
          <el-input
            v-model="grid.bottom"
            size="small"
          />
        </setting-item>
      </setting-item-box>
    </Collapse>
    <Collapse
      v-if="xAxis"
      name="X轴"
    >
      <template #title>
        X轴
        <el-switch
          v-model="xAxis.show"
          size="small"
          style="margin-left: 30px"
          @click.native.stop
        />
      </template>
      <setting-item-box name="单位">
        <setting-item name="名称">
          <el-input
            v-model="xAxis.name"
            size="small"
          />
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            v-model="xAxis.nameTextStyle.color"
            size="small"
          />
        </setting-item>
        <setting-item name="大小">
          <el-input-number
            v-model="xAxis.nameTextStyle.fontSize"
            :min="12"
            size="small"
          />
        </setting-item>
        <setting-item name="偏移量">
          <el-input-number
            v-model="xAxis.nameGap"
            :min="5"
            size="small"
          />
        </setting-item>
      </setting-item-box>
      <setting-item-box name="标签">
        <setting-item name="展示">
          <el-switch
            v-model="xAxis.axisLabel.show"
            size="small"
          />
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            v-model="xAxis.axisLabel.color"
            size="small"
          />
        </setting-item>
        <setting-item name="大小">
          <el-input-number
            v-model="xAxis.axisLabel.fontSize"
            :min="8"
            size="small"
          />
        </setting-item>
        <setting-item name="偏移量">
          <el-input-number
            v-model="xAxis.axisLabel.rotate"
            :min="-90"
            :max="90"
            size="small"
          />
        </setting-item>
      </setting-item-box>
      <setting-item-box name="轴线">
        <setting-item name="展示">
          <el-switch
            v-model="xAxis.axisLine.show"
            size="small"
          />
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            v-model="xAxis.axisLine.lineStyle.color"
            size="small"
          />
        </setting-item>
        <setting-item name="粗细">
          <el-input-number
            v-model="xAxis.axisLine.lineStyle.width"
            :min="1"
            size="small"
          />
        </setting-item>
        <setting-item name="位置">
          <el-select
            v-model="xAxis.position"
            size="small"
          >
            <el-option
              v-for="item in axisConfig.xposition"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </setting-item>
        <setting-item name="对齐零">
          <el-switch
            v-model="xAxis.axisLine.onZero"
            size="small"
          />
        </setting-item>
        <setting-item name="反向">
          <el-switch
            v-model="xAxis.inverse"
            size="small"
          />
        </setting-item>
      </setting-item-box>
      <setting-item-box name="刻度">
        <setting-item name="展示">
          <el-switch
            v-model="xAxis.axisTick.show"
            size="small"
          />
        </setting-item>
        <setting-item name="长度">
          <el-input-number
            v-model="xAxis.axisTick.length"
            :min="1"
            size="small"
          />
        </setting-item>
      </setting-item-box>
      <setting-item-box name="分割线">
        <setting-item name="展示">
          <el-switch
            v-model="xAxis.splitLine.show"
            size="small"
          />
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            v-model="xAxis.splitLine.lineStyle.color"
            size="small"
          />
        </setting-item>
        <setting-item name="粗细">
          <el-input-number
            v-model="xAxis.splitLine.lineStyle.width"
            :min="1"
            size="small"
          />
        </setting-item>
        <setting-item name="类型">
          <el-select
            v-model="xAxis.splitLine.lineStyle.type"
            size="small"
            :options="axisConfig.splitLint.lineStyle.type"
          >
            <el-option
              v-for="item in axisConfig.splitLint.lineStyle.type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </setting-item>
      </setting-item-box>
    </Collapse>
    <Collapse
      v-if="yAxis"
      name="Y轴"
    >
      <template #title>
        Y轴
        <el-switch
          v-model="yAxis.show"
          size="small"
          style="margin-left: 30px"
          @click.native.stop
        />
      </template>
      <setting-item-box name="单位">
        <setting-item name="名称">
          <el-input
            v-model="yAxis.name"
            size="small"
          />
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            v-model="yAxis.nameTextStyle.color"
            size="small"
          />
        </setting-item>
        <setting-item name="大小">
          <el-input-number
            v-model="yAxis.nameTextStyle.fontSize"
            :min="8"
            size="small"
          />
        </setting-item>
        <setting-item name="偏移量">
          <el-input-number
            v-model="yAxis.nameGap"
            :min="5"
            size="small"
          />
        </setting-item>
      </setting-item-box>
      <setting-item-box name="标签">
        <setting-item name="展示">
          <el-switch
            v-model="yAxis.axisLabel.show"
            size="small"
          />
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            v-model="yAxis.axisLabel.color"
            size="small"
          />
        </setting-item>
        <setting-item name="大小">
          <el-input-number
            v-model="yAxis.axisLabel.fontSize"
            :min="8"
            size="small"
          />
        </setting-item>
        <setting-item name="偏移量">
          <el-input-number
            v-model="yAxis.axisLabel.rotate"
            :min="-90"
            :max="90"
            size="small"
          />
        </setting-item>
      </setting-item-box>
      <setting-item-box name="轴线">
        <setting-item name="展示">
          <el-switch
            v-model="yAxis.axisLine.show"
            size="small"
          />
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            v-model="yAxis.axisLine.lineStyle.color"
            size="small"
          />
        </setting-item>
        <setting-item name="粗细">
          <el-input-number
            v-model="yAxis.axisLine.lineStyle.width"
            :min="1"
            size="small"
          />
        </setting-item>
        <setting-item name="位置">
          <el-select
            v-model="yAxis.position"
            size="small"
          >
            <el-option
              v-for="item in axisConfig.yposition"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </setting-item>
        <setting-item name="对齐零">
          <el-switch
            v-model="yAxis.axisLine.onZero"
            size="small"
          />
        </setting-item>
        <setting-item name="反向">
          <el-switch
            v-model="yAxis.inverse"
            size="small"
          />
        </setting-item>
      </setting-item-box>
      <setting-item-box name="刻度">
        <setting-item name="展示">
          <el-switch
            v-model="yAxis.axisTick.show"
            size="small"
          />
        </setting-item>
        <setting-item name="长度">
          <el-input-number
            v-model="yAxis.axisTick.length"
            :min="1"
            size="small"
          />
        </setting-item>
      </setting-item-box>
      <setting-item-box name="分割线">
        <setting-item name="展示">
          <el-switch
            v-model="yAxis.splitLine.show"
            size="small"
          />
        </setting-item>
        <setting-item name="颜色">
          <el-color-picker
            v-model="yAxis.splitLine.lineStyle.color"
            size="small"
          />
        </setting-item>
        <setting-item name="粗细">
          <el-input-number
            v-model="yAxis.splitLine.lineStyle.width"
            :min="1"
            size="small"
          />
        </setting-item>
        <setting-item name="类型">
          <el-select
            v-model="yAxis.splitLine.lineStyle.type"
            size="small"
          >
            <el-option
              v-for="item in axisConfig.splitLint.lineStyle.type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </setting-item>
      </setting-item-box>
    </Collapse>
    <Collapse
      v-if="legend"
      name="图例"
    >
      <template #title>
        图例
        <el-switch
          v-model="legend.show"
          size="small"
          style="margin-left: 25px;"
          @click.native.stop
        />
      </template>
      <setting-item-box name="图例文字">
        <setting-item name="颜色">
          <el-color-picker
            v-model="legend.textStyle.color"
            size="small"
          />
        </setting-item>
        <setting-item name="大小">
          <el-input-number
            v-model="legend.textStyle.fontSize"
            :min="1"
            size="small"
          />
        </setting-item>
      </setting-item-box>
      <setting-item-box name="图例位置">
        <setting-item name="x轴">
          <el-select
            v-model="legend.x"
            size="small"
          >
            <el-option
              v-for="item in legendConfig.lengendX"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </setting-item>
        <setting-item name="y轴">
          <el-select
            v-model="legend.y"
            size="small"
          >
            <el-option
              v-for="item in legendConfig.lengendY"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </setting-item>
      </setting-item-box>
      <setting-item-box name="图例信息">
        <setting-item name="方向">
          <el-select
            v-model="legend.orient"
            size="small"
          >
            <el-option
              v-for="item in legendConfig.orient"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </setting-item>
        <setting-item name="形状">
          <el-select
            v-model="legend.icon"
            size="small"
          >
            <el-option
              v-for="item in legendConfig.shape"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </setting-item>
      </setting-item-box>
      <setting-item-box name="图例大小">
        <setting-item name="宽">
          <el-input-number
            v-model="legend.itemWidth"
            :min="1"
            size="small"
          />
        </setting-item>
        <setting-item name="高">
          <el-input-number
            v-model="legend.itemHeight"
            :min="1"
            size="small"
          />
        </setting-item>
      </setting-item-box>
    </Collapse>
  </div>
</template>

<script>
import Collapse from '@/components/Collapse'
import SettingItemBox from '@/components/SettingItemBox'
import SettingItem from '@/components/SettingItem'
import { axisConfig, legendConfig } from '@/packages'
export default {
  components: {
    Collapse,
    SettingItemBox,
    SettingItem
  },
  props: {
    optionData: {
      type: Object,
      required: true,
      default: () => { }
    },
  },
  computed: {
    grid () {
      return this.optionData?.grid
    },
    xAxis () {
      return this.optionData?.xAxis
    },
    yAxis () {
      return this.optionData?.yAxis
    },
    legend () {
      return this.optionData?.legend
    },
  },
  data () {
    return {
      axisConfig,
      legendConfig
    }
  }
}
</script>

<style>
</style>